<template>
  <div>
    <div class="cockpitMainModulesTitle">数字化场景式审批</div>
    <div class="cockpitMainModulesCenter top_box">
      <div class="cockpitMainModulesTitleBox center">智能辅助审批</div>
      <div class="cockpitMainModulesCenterTopSelect">
        <div class="cockpitMainModulesCenterTopSelectbtnBox">
          <span class="cockpitMainModulesCenterTopSelectbtnBox_btnSpan">机审</span>
          <div class="cockpitMainModulesCenterTopSelectbtnBox_dateSpan">
            1-2分钟
          </div>
        </div>
        <div class="cockpitMainModulesCenterTopSelectInfoBox">
          <p>
            270余项数据，<strong>一图统拨</strong>
          </p>
          <p>
            180余项指标，<strong>一键核查</strong>
          </p>
          <p>智能分析结果，<strong>一键导出</strong></p>
        </div>
        <div class="cockpitMainModulesCenterTopSelectImgBox">
          <img src="../../assets/cockpitImg/centerTop1.png" class="cockpitMainModulesCenterTopSelectImgBox_img" />
        </div>
      </div>
      <div class="cockpitMainModulesCenterTopSelect cockpitMainModulesCenterTopSelectColse">
        <div class="cockpitMainModulesCenterTopSelectbtnBox">
          <span class="cockpitMainModulesCenterTopSelectbtnBox_btnSpan_Close">人审</span>
          <div class="cockpitMainModulesCenterTopSelectbtnBox_dateSpan_Close">
            2-4小时
          </div>
        </div>
        <div class="cockpitMainModulesCenterTopSelectInfoBox">
          <p>系统不通，数据不共享</p>
          <p>数据源多，数据差异大</p>
          <p>核查项多，人工负担重</p>
        </div>
        <div class="cockpitMainModulesCenterTopSelectImgBox">
          <img src="../../assets/cockpitImg/centerTop2.jpg" class="cockpitMainModulesCenterTopSelectImgBox_img" />
        </div>
      </div>
      <div class="cockpitMainModulesCenterTopBtnList">
        <div class="cockpitMainModulesCenterTopBtnListBox">招商事前研判</div>
        <div class="cockpitMainModulesCenterTopBtnListBox">管线查册</div>
        <div class="cockpitMainModulesCenterTopBtnListBox">规划指标审核</div>
        <div class="cockpitMainModulesCenterTopBtnListBox">环评政策审核</div>
        <div class="cockpitMainModulesCenterTopBtnListLastBox">···</div>
      </div>
    </div>
    <div class="cockpitMainModulesCenter">
      <div class="cockpitMainModulesTitleBox center">数字孪生审查</div>
      <div class="cockpitMainModulesCenterSubTitle">
        <div class="cockpitMainModulesCenterSubTitleBox"><img src="../../assets/cockpitImg/icon_biaoqian.png"
            class="cockpitMainModulesCenterSubTitleBoxImg"><span
            class="cockpitMainModulesCenterSubTitleBoxText">方案融入现实</span></div>
        <div class="cockpitMainModulesCenterSubTitleBox"><img src="../../assets/cockpitImg/icon_biaoqian.png"
            class="cockpitMainModulesCenterSubTitleBoxImg"><span
            class="cockpitMainModulesCenterSubTitleBoxText">景观协调审查</span></div>
        <div class="cockpitMainModulesCenterSubTitleBox"><img src="../../assets/cockpitImg/icon_biaoqian.png"
            class="cockpitMainModulesCenterSubTitleBoxImg"><span
            class="cockpitMainModulesCenterSubTitleBoxText">方案效果审查</span></div>
      </div>
      <div class="cockpitMainModulesCenterImgList">
        <div class="leftImg"></div>
        <div class="rightvideo" ref="videobox">
          <img src="../../assets/cockpitImg/icon_paly.png" class="icon_paly" v-show="show_icon_paly" @click="playVideo">
          <video height="100%" ref="video" v-show="!show_icon_paly" controls>
            <source src="@/assets/设计方案数字孪生审查0720-v2.mp4" type="video/mp4" />
          </video>
          <div class="closeBtn" v-show="!show_icon_paly" @click="exitVideo"><i class="el-icon-close"></i></div>
        </div>
      </div>
      <div class="cockpitMainModulesCenterJianTou">
        <img src="../../assets/cockpitImg/icon_jiantou.png" ref="jiantou">
      </div>
    </div>
    <div class="cockpitMainModulesCenter">
      <div class="cockpitMainModulesTitleBox center">
        <div class="box_left">订制式审批服务</div>
        <div class="box_right">订制式审批服务</div>
      </div>
      <div class="box_title">一键定制个性化最优流程,一键配置全链条专员</div>
      <div class="img_box">
        <img src="../../assets/cockpitImg/服务流程.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show_icon_paly: true,
      isFullscreen: false,
    }
  },
  methods: {
    // 点击图片右上角的播放按钮的功能
    playVideo() {
      this.show_icon_paly = false
      this.$refs.video.currentTime = 0
      this.$refs.video.play()
      this.enterFullscreen()
    },
    exitVideo(){
      this.show_icon_paly = true
      this.$refs.video.pause()
      this.exitFullscreen()
    },
    // 点击video控制其播放或暂停
    togglePlayPause() {
      if (this.$refs.video.paused) {
        this.$refs.video.play();
      } else {
        this.$refs.video.pause();
      }
    },
    // 父容器全屏方法
    enterFullscreen() {
      var videoElement = this.$refs.videobox;
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen();
      }
    },
    // 退出全屏
    exitFullscreen() {
      // if (document.exitFullscreen) {
      //   document.exitFullscreen();
      // } else if (document.mozCancelFullScreen) {
      //   document.mozCancelFullScreen();
      // } else if (document.webkitExitFullscreen) {
      //   document.webkitExitFullscreen();
      // } else if (document.msExitFullscreen) {
      //   document.msExitFullscreen();
      // }
      // this.$refs.video.pause();
      // this.isFullscreen = false;
      document.exitFullscreen()
    },
    // handleFullscreenChange() {
    //   this.isFullscreen = !!(
    //     document.fullscreenElement ||
    //     document.mozFullScreenElement ||
    //     document.webkitFullscreenElement ||
    //     document.msFullscreenElement
    //   );
    //   if (!this.isFullscreen) {
    //     this.$refs.video.pause();
    //     this.show_icon_paly = true
    //   }
    // },
    // toggleFullscreen() {
    //   const fullscreenElement = this.$refs.fullscreenElement;
    //   if (document.fullscreenElement) {
    //     // 如果已经处于全屏状态，则退出全屏
    //     if (document.exitFullscreen) {
    //       document.exitFullscreen();
    //     }
    //   } else {
    //     // 否则，进入全屏
    //     if (fullscreenElement.requestFullscreen) {
    //       fullscreenElement.requestFullscreen();
    //     } else if (fullscreenElement.mozRequestFullScreen) {
    //       fullscreenElement.mozRequestFullScreen();
    //     } else if (fullscreenElement.webkitRequestFullscreen) {
    //       fullscreenElement.webkitRequestFullscreen();
    //     } else if (fullscreenElement.msRequestFullscreen) {
    //       fullscreenElement.msRequestFullscreen();
    //     }
    //   }
    // }
  },
  mounted() {
    let jiantouDom = this.$refs.jiantou
    const width = jiantouDom.offsetWidth;
    const height = jiantouDom.offsetHeight;
    if (height >= (width / 5)) {
      jiantouDom.style.height = `${width / 5}px`;
    }
  }
};
</script>

<style></style>